<template>
  <div class="card-table">
    <div class="table-header">
      <div class="header-botton-if">
        <slot name="tableHeader"></slot>
      </div>
      <div class="header-button-ri">
        <!-- <el-button :icon="Refresh" circle> </el-button>
        <el-button :icon="Printer" circle> </el-button>
        <el-button :icon="Operation" circle> </el-button>
        <el-button :icon="Search" circle> </el-button> -->

        <div class="flex gap-4 mb-4">
          <span class="test">商品名称：</span>
          <el-input v-model="shopNameData" style="width: 180px"
          @input="onInput" clearable placeholder="请输入商品名称" />
        </div>

        <div class="flex gap-4 mb-4">
          <span class="test">商品分类：</span>
          <el-select v-model="category1data" placeholder="请选商品类别" clearable>
            <el-option v-for="item in goodsCategory1Data" :key="item.categoryName" :label="item.categoryName"
              :value="item.id" />
          </el-select>
        </div>

        <div class="flex gap-4 mb-4">
          <span class="test">商品状态：</span>
          <el-select v-model="value1" placeholder="请选商品状态" clearable>
            <el-option v-for="item in goodsStatus" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </div>
      </div>
    </div>



    <!-- 表格主体 -->
    <el-table border :data="tableData" ref="tableRef" v-bind="$attrs" class="hei" table-layout="auto">

      <el-table-column prop="id" label="商品编号" width="100" align="center" show-overflow-tooltip />
      <el-table-column prop="goodsName" width="150" label="商品名称" align="center" show-overflow-tooltip />

      

      <el-table-column label="商品图片" width="250" align="center">
        <template #default="scope">
          <div class="demo-image">
            <div class="block">

              <el-image style="width: 100px; height: 100px" :src="imgUrl() + scope.row.goodsImg" />
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="cat_id" label="商品分类" width="150" align="center" show-overflow-tooltip>
        <template #default="scope">
          <div>
            {{  getCategory(scope.row.cat_id) }}
          </div>
        </template>
      </el-table-column>
      
      <el-table-column prop="isShow" width="100" label="商品状态" align="center" show-overflow-tooltip>
        <template #default="scope">
          <div>
            {{ scope.row.isShow == 2 ? "下架" : scope.row.isShow == 1 ? "上架" : "" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" width="150" label="价格" align="center" show-overflow-tooltip>
        <template #default="scope">
          
          <span>
             {{scope.row.price }}
          </span>
          <span> 元</span>
        </template>
      </el-table-column>

      <el-table-column prop="stock" width="200" label="库存" align="center" show-overflow-tooltip/>
      <el-table-column prop="introduction" label="商品描述" align="center" show-overflow-tooltip />
      
      <el-table-column fixed="right" label="操作" width="300" align="center">
        <!-- 表格操作 -->
        <template #default="scope">

          <el-button type="warning" link :link="scope.row.identity ? true : false" :icon="EditPen"
            @click="EditeData(scope)">商品修改</el-button>



          <el-popconfirm confirm-button-text="是" cancel-button-text="不" :icon="InfoFilled" icon-color="#626AEF"
            title="你确定要删除商家吗？" @confirm="confirmEvent(scope)">
            <template #reference>
              <el-button type="danger">删除商品</el-button>
            </template>
          </el-popconfirm>
        </template>



      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagin">
      <div class="pagin-left">
      </div>
      <Pagination :pageTotalSize="pageTotalSize"></Pagination>
    </div>


  </div>
</template>

<script setup>
import SearchForm from "@/components/SearchForm/index.vue";
import Pagination from "./Pagination/index.vue";
import {
  Refresh,
  Printer,
  Operation,
  Search,
  CirclePlus,
  Delete,
  EditPen,
  Download,
  Upload,
  View,
  InfoFilled,
} from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus'
import { computed, ref, toRaw, watchEffect, reactive, onMounted, watch } from "vue";
import { goodsInfo } from "@/stores/goodsInfo.js"
// import { worksData } from "@/stores/worksData.js";
// import {staffData} from "@/stores/staff.js" 
import { useRouter } from 'vue-router'
import { baseUrl } from "@/utils/util"
import { userManage } from "@/stores/user.js"
import { mainStore } from "@/stores";
import { debounce } from 'lodash';

let mStore = mainStore();
// import { CollapseModelValue } from 'element-plus'
let goodsinfo = goodsInfo()


const activeNames = ref(['1'])

// 是否显示搜索模块
let props = defineProps({
  isShowSearch: {
    type: Boolean,
    default: true
  },
  staffInfoData: {
    type: Array,
    default: []
  }
})

//商品名称
let shopNameData = ref()

//商品分类
let category1data = ref()

// 分类一的数据
let goodsCategory1Data = computed(() => {
  console.log(goodsinfo.category1Data, "goodsinfo.category1Data")
  return goodsinfo.category1Data
})



//商品状态
let goodsStatus = reactive([
  {
    name: "下架",
    value: 2,
  },
  {
    name: "上架",
    value: 1,
  },
]);


const value1 = ref('')//选择的分类

//图片地址

let imgUrl = computed(() => {

  // console.log(tableData.storeImg,"tableData.storeImg")
  return baseUrl
})

let pageTotalSize = computed(() => {
  // return mStaff.pageTotalSize
})

//使用路由
let router = useRouter()

let mStaff = userManage()

let emit = defineEmits(["openDoor", "openAddDoor"])

let isSearch = computed(() => {
  return props.isShowSearch
})
// const isShowSearch = ref(true);
// let wData = worksData();

//监控商品
watch(()=>category1data,(e)=>{
    // console.log(e.value,"这是商品分类")
    goodsinfo.getGoodsData({ shopAddId: mStore.userinfo.shopAddress.id ,category1Id:e.value})
},{deep:true})

// 检测商品的状态

watch(()=>value1,(e)=>{
    // console.log(e.value,"这是商品状态")
    goodsinfo.getGoodsData({ shopAddId: mStore.userinfo.shopAddress.id ,isShow:e.value})
},{deep:true})

// 获取仓库里面的作品数据
let tableData = computed(() => {
  // console.log(wData.teamsWorksdata)
  let newData = []
  let data = toRaw(props.staffInfoData)

  //  console.log(data,"这是从父亲传过来的")
  data.forEach(item => {
    newData.push({ ...item, ...item.identity })
  })
  // console.log(newData)
  return newData
});



// 模拟的查询函数
const performQuery = (query) => {
  goodsinfo.getGoodsData({ shopAddId: mStore.userinfo.shopAddress.id ,goodsName:query})
  // console.log(query,"query")
}

 // 使用 lodash 的 debounce 方法创建防抖函数
 const debouncedPerformQuery = debounce((query) => {
      performQuery(query);
    }, 400); // 300ms 延迟

 // 输入事件处理函数
 const onInput = (value) => {
      debouncedPerformQuery(value);
    };

// 获取商品的数据
let getCategory = (e)=>{

   let res = goodsinfo.goodsDataList.find(category => category.id == e);
    // console.log(res.categoryName,"分类")
    //  console.log("分类12212")
  return res.categoryName
  // return 22
}



// 删除商品数据
let confirmEvent = async (e) => {
  let res = await goodsinfo.deletecategory2Data({ id: e.row.id })
  if (res.code == 200) {
    // emit("uploadSuccess")
    goodsinfo.getGoodsData({ shopAddId: mStore.userinfo.shopAddress.id })

    ElMessage({
      showClose: true,
      message: res.mess,
      type: 'success',
    })
  } else {
    ElMessage({
      showClose: true,
      message: res.mess,
      type: 'error',
    })
  }


}
// // 是否选择了数据
// let allSelectData = (e) => {
//   selectData.value = e;
// };

// // 展示详情数据
// let showData = (e) => {
//   console.log(e.row);
//   // getSelectionRows()
// };




// //添加商家商店位置
// let addShopSite = (e) => {

//   // this.$router.push({ name: 'addSite' });
//   // this.$router.push({ name: 'addSite' });
//   // this.$router.push('/');

//   // mStaff.$patch((state)=>{
//   //   console.log(state,"state")
//   //   state.userShopData = e.row
//   // })
//   mStaff.updatauserShopData(e.row)
//   router.push({ name: 'addSite' })
//   // console.log(router,"fesfe")

//   // console.log(e.row, "商家店铺位置")
// }

//更新商品数据
let EditeData = (e)=>{
  // console.log(e,"e")
    mStaff.imgUrl = e.row.goodsImg
    emit("openDoor",e.row)
    // console.log(e.row,"e.row")

}

// 提交数据
let pushData = () => {
  // console.log(selectData.value);
  // console.log("提交数据")
};

onMounted( async()=>{
  
})

</script>

<style lang="scss" scoped>
.card-table {
  box-sizing: border-box;
  background-color: #fff;
  padding: 15px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .table-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .header-button-ri {
      display: flex;

      .gap-4 {
        margin-right: 20px;

        .test {
          margin-right: 10px;
          font-size: 14px;
        }
      }
    }
  }

  .pagin {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .pagin-left {
      display: flex;
      align-items: center;
      font-size: 14px;

      .mar {
        margin-left: 20px;

        .a {
          margin: 0 4px;
        }
      }
    }
  }

  .hei {
    width: 100%;
    height: 100%;
  }
}
</style>